<template>
    <div>
        <slot name="setting"></slot>
        <blank-place-holder v-if="item.data.value == ''" msg="选择此处再在配置区域编辑文字"></blank-place-holder>
        <div class="ql-container ql-snow" :style="{
            borderStyle: 'none',
            background: item.data.value === '' ? 'none' : (item.data.style.backgroundColor  ? item.data.style.backgroundColor : 'none'),
            animation: 'hideIndex 0.5s',
            height: item.data.value === '' ? '204px' : 'auto'
        }">
            <div class="ql-editor" v-html="item.data.value">
            </div>
        </div>
    </div>
</template>
<style>
    @keyframes hideIndex {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .ql-toolbar {
        background-color: white;
    }

    .ql-editor:hover {
        cursor: default;
    }
</style>
<script>
    import 'quill/dist/quill.core.css' // import styles
    import 'quill/dist/quill.snow.css' // for snow theme
    import {mapState} from 'vuex'
    import BlankPlaceHolder from "../../BlankPlaceHolder";
    export default {
        components: {
            BlankPlaceHolder,
        },
        props: {
            item: Object,
        },
        computed: {
            ...mapState([
                 'selectedComponent',
            ])
        },
        data() {
            return {

            }
        }
    }
</script>